<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<%@ taglib prefix ="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<%@ include file="/common/common-css.jsp" %>
		<style>
		#jquery-table td{cursor:pointer !important}
		.load_bg{background:#000;opacity:0.1;left:0px;top:0px;position:fixed;height:100%;width:100%;overflow:hidden;z-index:10000;}
		@media (min-width: 768px) and  (max-width: 1200px){
			.backup-text{
				width:100px !important;
			}
		}
		</style>
	</head>
<body  class="no-skin">
<div  class="load_bg" style="display:none;" ></div>
<img src="http://img.xmiles.cn/commentloading.gif" class="load_img" style="display:none"/>
<div class="page-content">
<div id="test"></div>
			<div class="page-header" style="margin-bottom:0px;padding-bottom:10px;">
			
				<h1 id="fu_name">
					
				</h1>
			</div>
	<form id="queryForm" method="post">
	<div class="page-content-area">
		<div class="row">
			<div class="col-sm-12">
				<div class="widget-box" style="border:0px solid #ccc; border-top:none;border-bottom:none;">
					<div class="widget-header widget-header-blue widget-header-flat">
						<h4 class="widget-title">微信消息业务统计</h4>

						<div class="widget-toolbar">
							<a href="#" data-action="collapse">
								<i class="ace-icon fa fa-chevron-up"></i>
							</a>
						</div>
					</div>

					<div class=" widget-body">
						<!-- <div class="widget-main" style="padding:12px;border:0px solid #ccc; border-top:none;border-bottom:none;"> -->
									<div class="widget-main" >
																				

										<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
											<label class="col-sm-4 control-label" for="operate" style="text-align:right;">业务类型：</label>
											<div class="col-sm-8">
												<s:select id="business" name="business" list="%{paramsMap.business_list}" listKey="key" listValue="value" headerKey="" headerValue="--请选择--" cssClass="form-control">
												</s:select>
											</div>
										</div>
										
										<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
											<label class="col-sm-4 control-label"  style="text-align:right"  for="sex">时间:</label>
											<div class="col-sm-8">
												<div class="input-daterange input-group">
													<input type="text" data-date-format="yyyy/mm/dd" class="date-picker input-sm form-control" style="padding-left:0px" name="startTime">
													<span class="input-group-addon" style="width:6px">
														<i class="fa fa-exchange"></i>
													</span>
													<input type="text" data-date-format="yyyy/mm/dd" class="date-picker input-sm form-control" style="padding-left:0px" name="endTime">
												</div>
											</div>
										</div>
										
							</div><!-- /.widget-main -->
					</div><!-- /.widget-body -->
				</div><!-- /.widget-box -->
			</div><!-- /.col-sm-12 -->
				<div class="col-md-12 center">
				<div class="clearfix form-actions">
					<button class="btn btn-purple  no-border" type="button" name="btn-query" onclick="query_any()" id="btn-query">
						<i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
						查询
					</button>
					&nbsp;&nbsp;&nbsp;
					<button class="btn btn-grey  no-border" type="reset">
						<i class="ace-icon fa fa-undo icon-on-right bigger-110"></i>
						重置
					</button>
					
					
				  </div>
		   </div>
		</div><!-- /.row -->
				 <div id="container" style="min-width:700px;height:400px"></div>
		
 		<div class="row">
			<div class="col-xs-12">
				<table id="jquery-table" class="table table-striped table-bordered table-hover">
				</table>
			</div><!-- /.col -->
		</div><!-- /.row -->
			
	</div><!-- /.page-content-area -->
	</form>
</div><!-- /.page-content -->

<!--
<div id="textAlert" class="alert alert-dismissible discovery-alert" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <span id="errText"></span>
</div>
-->

<%@ include file="/common/common-js.jsp" %>
 <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
 <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>
<script type="text/javascript" src="${ctx}/js/call_func.js"></script>
<link rel="stylesheet" href="${ctx}/ace/css/just-tip.css"/>
<script src="${ctx}/ace/js/justTools.js"></script>
<!-- inline scripts related to this page -->
<script type="text/javascript">
//导出列表
function loadlist(){
	var form = document.forms["queryForm"];
	form.action= ctx + "/jiayoukaspace/download.action";
	form.submit();
}
		
      //【查询】按钮Click事件
	 function query_any(){
		$(".load_bg").removeAttr("style");
		$(".load_img").removeAttr("style");
		if(jqTable != null){jqTable.fnDraw();}
		else{loaddata();}
		 $("#delete_btn").attr("style","display:block");
		 $("#delete_hr").attr("style","margin-top:0px;margin-bottom:20px;display:block");
	  };
	  
		$(document).ready(function(){
			//时间范围插件初始化
			$('.date-picker').datepicker({
				autoclose : true,
				format : 'yyyy-mm-dd'
			});
		});
		
var jqTable = null;

var loaddata = function(){
	jQuery(function($) {
		jqTable = $('#jquery-table').dataTable( {
		    //数据列控制（包括对应返回JSON属性名称，对应表头列索引位置、数据转换封装等）
		    "columnDefs": [
		    	{
		    		  "title":"日期",
		    		  "name":"day_no",
		    		  "data": "day_no",
		    	  	  "targets": [0], 
		    	  	  "class": "center",
		    	  	  "bSortable": false,
		    	},
		    	{
		    	 	  "title":"数量",
		    	 	  "name":"total_cnt",
		    	 	  "data": "total_cnt",
		    	  	  "targets": [1],
		    	  	  "class": "center",
		    	  	  "bSortable": false,
		    	},
		    	{
		    	 	  "title":"业务类型",
		    	 	  "name":"busi",
		    	 	  "data": "busi",
		    	  	  "targets": [2] ,
		    	  	  "class": "center",
		    	  	  "bSortable": false,
		    	}
		  	],
			"sAjaxSource": ctx+"/weixin/get_msg_dayrecord.action" + "?rand=" + Math.random(),//数据源URL
			"fnServerData": function ( sSource, aoData, fnCallback ) {//从服务器请求数据
		   			var data = $('#queryForm').serializeObject();
					
					data.aoData = JSON.stringify(aoData);
					$.ajax({
						"type": "POST",
						"dataType": 'json',
						"url": sSource,
						"data":data,
						"timeout":300000,
						"success": function(resp){
						
							fnCallback(resp);
							initListPage(resp);
							listWidget(resp.aaData);
							$(".load_bg").attr("style","display:none");
							 $(".load_img").attr("style","display:none");
							

						},		
						"error": function(XMLHttpRequest, textStatus, errorThrown) {
							$(".load_bg").attr("style","display:none");
							$(".load_img").attr("style","display:none");
							alert('请求服务器错误,请刷新重试！！');//错误提示，包括服务器重启导致的session失效
						},				
				});
			},
			"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
				
			},
			"sScrollXInner": "100%",
			"sScrollY": "100%",//如果不设置，IE会有问题
		    "aaSorting": [[0,"desc"]] //初始化加载，默认按第几列排序、排序方式（列从0开始计算）
		});
		
		
	});
}
var listWidget = function(data) {
	var xData = new Array();
	var seriesData = new Array();
	for (dataIndex in data) {
		xData[data.length - 1 - dataIndex] = data[dataIndex].day_no;
		seriesData[data.length - 1 - dataIndex] = parseInt(data[dataIndex].total_cnt);
	}
	$('#container').highcharts({
        title: {
            text: '微信消息数',
            x: -20 //center
        },
        xAxis: {
            categories: xData
        },
        yAxis: {
            title: {
                text: '消息数'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '次'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            data: seriesData
        }]
    });
};
	
	//时间控件
	jQuery(function($) {
		$(".date-picker").datepicker({
			autoclose:true}).next().on(ace.click_event, function(){
					$(this).prev().focus();
		});
	});
</script>
		
</body>
</html>